<template>
  <div>
    <van-nav-bar title="服务中心" left-arrow @click-left="$router.push('/my')">
    </van-nav-bar>

    <!-- <van-grid :border="true" :column-num="2">
      <van-grid-item icon="phone-o"><span>在线客服</span> </van-grid-item>
      <van-grid-item icon="phone-o"><span>在线客服</span> </van-grid-item>
    </van-grid> -->
    <div class="bigservice">
      <div class="service">
        <van-icon name="friends-o" />
        在线客服
      </div>
      <div class="service">
        <van-icon name="phone-o" />
        在线客服
      </div>
    </div>

    <p>热门问题</p>
    <van-cell title="超级会员权限说明" is-link />
    <van-cell title="签到规则" is-link />
    <van-cell title="用户等级说明" is-link />
    <van-cell title="积分问题" is-link />
    <van-cell title="教我拍大片" is-link />
    <van-cell title="支付问题" is-link />
    <van-cell title="其它问题" is-link />
    <van-cell title="准时达问题" is-link />
    <van-cell title="会员说明" is-link />
    <van-cell title="会员问题" is-link />
    <van-cell title="红包问题" is-link />
    <van-cell title="活动规则" is-link />
    <van-cell title="补签规则" is-link />
    <van-cell title="优惠说明" is-link />
    <van-cell title="免责声明" is-link />
    <van-cell title="代金卷说明" is-link />
    <van-cell title="商务合作" is-link />
    <van-cell title="余额问题" is-link />
    <van-cell title="超赞商家" is-link />
    <van-cell title="匿名购买" is-link />
    <van-cell title="活动问题" is-link />
  </div>
</template>

<script>
import { explain } from "../api/user";
export default {
  data() {
    return {};
  },
  created() {
    explain().then((res) => {
      console.log(res);
      this.username = res.data;
    });
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-nav-bar__title {
    color: white;
    font-size: 22px;
    font-weight: 700;
  }
  .van-nav-bar__arrow {
    color: #fff;
    font-size: 20px;
  }
}
p {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 25px;
  text-indent: 1em;
}

.bigservice {
  display: flex;
  height: 100px;
  //   background-color: pink;
  div {
    flex: 1;
  }
  .service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid #f7f8f8;
  }
}
.van-icon-friends-o {
  font-size: 28px;
  color: #ff7b52;
}
.van-icon-phone-o {
  font-size: 28px;
  color: #6ac20b;
}
</style>